<script>
export default {
  name: "index",
  data() {
    return {
      article: {
        id: '',
        title: '东澳岛旅游全攻略，带你玩转最美海岛',
        cover: '/static/raiders/guide-cover.jpg',
        summary: '东澳岛位于广东省珠海市万山群岛，是一座集自然景观和海岛休闲于一体的美丽海岛。这里有洁白细腻的沙滩、清澈见底的海水、茂密的森林和丰富的海鲜资源，是国内少有的优质海岛旅游胜地。',
        author: '海岛旅行家',
        publishTime: '2023-05-15',
        views: 3256,
        jumpLink: '/pages/home/index',
        jumpText: '立即预订',
        content: `<div class="article-content">
          <h2>东澳岛简介</h2>
          <p>东澳岛是珠海市万山群岛的一个岛屿，面积约5.6平方公里，是广东省内保存最为完好的原生态海岛之一。岛上设施完善，有多家星级酒店和特色民宿，是休闲度假的理想选择。</p>
          <img src="/static/raiders/dongao1.jpg" alt="东澳岛全景" />
          <p>岛上著名的景点包括大竹湾、小竹湾、东澳湾等多个海湾，以及灯塔山、情人岛等自然景观。清澈的海水、柔软的沙滩和迷人的日落景色，让东澳岛成为摄影爱好者的天堂。</p>
          
          <h2>最佳旅行时间</h2>
          <p>东澳岛全年气候宜人，最佳旅游季节在5-10月。夏季是旅游高峰期，此时海水温度适宜，非常适合游泳和各种水上活动。但需要注意防晒和避开台风季节。</p>
          <p>春秋两季气温适中，游客较少，是喜欢安静度假的游客的理想选择。冬季气温相对较低，不太适合水上活动，但岛上依然风景秀丽，适合徒步和摄影。</p>
          
          <h2>交通攻略</h2>
          <p><strong>如何前往东澳岛：</strong></p>
          <p>从珠海九洲港或香洲港乘坐客轮前往东澳岛，航程约1.5-2小时。每天有多班客轮往返，建议提前查询最新航班信息并预订船票。</p>
          <img src="/static/raiders/ferry.jpg" alt="前往东澳岛的客轮" />
          <p><strong>岛内交通：</strong></p>
          <p>岛上交通以步行、电瓶车和摩托车为主。岛不大，主要景点之间可以步行到达。也可以租赁电瓶车或摩托车环岛游览，租金在100-200元/天不等。</p>
          
          <h2>住宿推荐</h2>
          <p>东澳岛上的住宿选择多样，从豪华度假酒店到特色民宿应有尽有：</p>
          <ul>
            <li><strong>东澳岛大酒店</strong>：位于大竹湾，设施完善，有私人海滩，价格在600-1200元/晚。</li>
            <li><strong>阳光沙滩度假村</strong>：靠近小竹湾，环境优美，价格在400-800元/晚。</li>
            <li><strong>渔家民宿</strong>：分布在岛上各处，价格亲民，约200-500元/晚，可以体验当地生活。</li>
          </ul>
          <img src="/static/raiders/hotel.jpg" alt="东澳岛酒店" />
          
          <h2>美食指南</h2>
          <p>东澳岛的海鲜新鲜美味，是岛上美食的精髓：</p>
          <ul>
            <li><strong>海鲜大餐</strong>：螃蟹、龙虾、鲍鱼等新鲜海产品，可以在岛上的海鲜餐厅或渔家乐品尝。</li>
            <li><strong>渔家风味</strong>：咸鱼、腌制海产品等当地特色菜肴。</li>
            <li><strong>海鲜烧烤</strong>：在沙滩上享受烧烤美食和海景的完美结合。</li>
          </ul>
          <p>推荐餐厅：大竹湾海鲜楼、渔家乐海鲜城、沙滩烧烤吧等。</p>
          
          <h2>活动推荐</h2>
          <p><strong>水上活动：</strong></p>
          <ul>
            <li>浮潜：东澳岛的海水清澈，是体验浮潜的理想之地。</li>
            <li>海钓：可以租船出海钓鱼，体验渔民生活。</li>
            <li>香蕉船、摩托艇等水上项目。</li>
          </ul>
          <p><strong>陆上活动：</strong></p>
          <ul>
            <li>徒步登山：可以登上灯塔山，俯瞰整个东澳岛。</li>
            <li>环岛游：租电瓶车或摩托车环岛游览。</li>
            <li>沙滩娱乐：沙滩排球、沙滩足球等。</li>
          </ul>
          <img src="/static/raiders/activity.jpg" alt="水上活动" />
          
          <h2>旅行贴士</h2>
          <ol>
            <li>提前预订船票和住宿，特别是在旅游旺季。</li>
            <li>带好防晒用品，岛上阳光强烈。</li>
            <li>准备一些常用药品，岛上医疗设施有限。</li>
            <li>保管好贵重物品，特别是在沙滩和水中活动时。</li>
            <li>尊重当地环境，不要随意丢弃垃圾。</li>
            <li>注意查询天气预报，避开台风和恶劣天气。</li>
          </ol>
          
          <h2>行程规划</h2>
          <p><strong>两日游行程建议：</strong></p>
          <p>第一天：</p>
          <ul>
            <li>上午：乘船抵达东澳岛，办理入住。</li>
            <li>中午：在酒店或附近餐厅享用海鲜午餐。</li>
            <li>下午：前往大竹湾沙滩，享受阳光与海水。</li>
            <li>傍晚：在沙滩欣赏日落，晚上可以参加沙滩烧烤。</li>
          </ul>
          <p>第二天：</p>
          <ul>
            <li>上午：环岛游览，参观小竹湾和东澳湾。</li>
            <li>中午：在岛上特色餐厅用餐。</li>
            <li>下午：登灯塔山，俯瞰东澳全景，拍摄美丽照片。</li>
            <li>傍晚：返程，结束愉快的东澳岛之旅。</li>
          </ul>
          
          <p>希望这份东澳岛旅游攻略能够帮助您计划一次完美的海岛之旅。如有任何问题，欢迎留言咨询！</p>
        </div>`
      },
      loading: true
    }
  },
  onLoad(options) {
    // 从路由参数获取文章ID
    if (options && options.id) {
      this.article.id = options.id;
      this.fetchArticleDetail();
    } else {
      // 没有ID参数时，使用默认数据（已在data中定义）
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  },
  methods: {
    // 获取文章详情
    fetchArticleDetail() {
      // 这里应该是实际的API请求，获取文章详情
      // 模拟API请求延迟
      setTimeout(() => {
        this.loading = false;
        // 实际应用中，这里会从API获取文章数据并赋值给this.article
      }, 1000);
    },
    
    // 跳转到指定链接
    jumpToLink() {
      if (this.article.jumpLink) {
        uni.navigateTo({
          url: this.article.jumpLink,
          fail: () => {
            uni.switchTab({
              url: this.article.jumpLink
            });
          }
        });
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 分享文章
    shareArticle() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    }
  }
}
</script>

<template>
  <view class="raiders-container">
    <!-- 加载中状态 -->
    <view class="loading-wrapper" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>
    
    <!-- 文章内容 -->
    <view class="article-wrapper" v-else>
      <!-- 封面图 -->
      <view class="cover-section">
        <image class="cover-image" :src="article.cover" mode="aspectFill"></image>
        <view class="back-btn" @click="goBack">
          <image src="/static/home/right-arrow-white.png" mode="aspectFit"></image>
        </view>
        <view class="share-btn" @click="shareArticle">
          <image src="/static/raiders/share-icon.png" mode="aspectFit"></image>
        </view>
      </view>
      
      <!-- 文章信息 -->
      <view class="article-info">
        <view class="article-meta">
          <text class="author">{{article.author}}</text>
          <text class="publish-time">{{article.publishTime}}</text>
          <text class="views">{{article.views}} 浏览</text>
        </view>
        
        <view class="article-title">{{article.title}}</view>
        
        <view class="article-summary">{{article.summary}}</view>
        
        <view class="jump-btn" @click="jumpToLink">
          <text>{{article.jumpText}}</text>
        </view>
      </view>
      
      <!-- 富文本内容 -->
      <view class="article-content-wrapper">
        <mp-html :content="article.content" scroll-table lazy-load />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.raiders-container {
  min-height: 100vh;
  background-color: #fff;
}

/* 加载状态 */
.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 6rpx solid #f0f0f0;
    border-top: 6rpx solid #3a7fe6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 封面区域 */
.cover-section {
  position: relative;
  width: 100%;
  height: 500rpx;
  
  .cover-image {
    width: 100%;
    height: 100%;
  }
  
  .back-btn, .share-btn {
    position: absolute;
    top: 80rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
  
  .back-btn {
    left: 30rpx;
    
    image {
      transform: rotate(180deg);
    }
  }
  
  .share-btn {
    right: 30rpx;
  }
}

/* 文章信息 */
.article-info {
  padding: 30rpx;
  margin-top: -50rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  position: relative;
  z-index: 1;
  
  .article-meta {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    color: #999;
    
    .author {
      margin-right: 20rpx;
      font-weight: 500;
      color: #666;
    }
    
    .publish-time {
      margin-right: 20rpx;
    }
  }
  
  .article-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20rpx;
  }
  
  .article-summary {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
  }
  
  .jump-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    padding: 0 40rpx;
    background: linear-gradient(135deg, #4794FF 0%, #2C6BEA 100%);
    border-radius: 40rpx;
    
    text {
      font-size: 28rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

/* 富文本内容 */
.article-content-wrapper {
  padding: 0 30rpx 80rpx;
  
  /deep/ .article-content {
    font-size: 30rpx;
    line-height: 1.8;
    color: #333;
    
    h2 {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin: 40rpx 0 20rpx;
    }
    
    p {
      margin-bottom: 20rpx;
    }
    
    img {
      width: 100%;
      border-radius: 12rpx;
      margin: 20rpx 0;
    }
    
    ul, ol {
      padding-left: 40rpx;
      margin: 20rpx 0;
      
      li {
        margin-bottom: 10rpx;
      }
    }
    
    strong {
      font-weight: bold;
    }
  }
}
</style>